<template>    
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">

                    <div class="layui-card" style="margin-bottom: 0">
                        <!-- <div class="layui-card-header">
                            概况地图
                            <a href="javascript:;" class="layui-a-tips" style="float:right;color:#009866;" onclick="openLegend();">(显示/隐藏图例)</a>
                        </div> -->
                        <div class="layui-card-body">
                            <div id="map" style="width: 100%;">
                                <div id="GH-map-layer"></div>
                                <div id="GH-map-ex"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            河南省居民饮食结构与耕地需求项目简介
                        </div>
                        <div class="layui-card-body layui-text layadmin-text">
                            <div id="jieshao" style="width: 100%; overflow: auto">
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河南省作为中国的农业大省和人口大省，耕地资源保护与饮食结构优化调整意义更显重大。</p>
                                <br/>
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本研究以河南省为研究区，以市为研究单元，以调查近年来河南省各市的城乡居民的饮食结构和对各类食品的消费情况，再利用FAO食物供给平衡表和LRF（食物消费土地需求）法得到各种食物的LRF及15年来各市的总LRF，借助ArcGIS获得河南省各市LRF空间分布结构，描绘15年来河南省居民的饮食结构和LRF变化的空间特征，从而借助膳食耕地足迹来分析饮食变迁对耕地资源的影响。</p>
                                <br/>
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;膳食耕地足迹是指膳食结构中各类食物在生产过程中所占用的耕地面积。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6" style="width:1010px;height:450px;">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            河南省介绍视频
                            <!-- <a href="javascript:;" class="layui-a-tips more-file" onclick="openVideo();">更多</a> -->
                        </div>
                        <div class="layui-card-body" style="width:1000px;height:400px;">
                            <div id="youku" style="width: 100%; height:100%">
                                <iframe width="100%" height="100%" src="//player.bilibili.com/player.html?aid=967585675&bvid=BV13p4y1C7sP&cid=173227299&page=1&rel=0&amp;autoplay=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--右侧一列-->
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">
                    热点新闻
                    <!-- <a href="javascript:;" class="layui-a-tips  more-file">更多</a> -->
                </div>
                <div class="layui-card-body layui-text layadmin-text">
                    <ul>
                        <li><a href="javascript:;" target="_blank">全省旅游产业推进大会</a></li>
                        <li><a href="javascript:;" target="_blank">开创旅游业发展新局面</a></li>
                        <li><a href="javascript:;" target="_blank">中国旅游日·优质旅游环保行</a></li>
                        <li><a href="javascript:;" target="_blank">我省发布乡村旅游“召集令”</a></li>
                        <li><a href="javascript:;" target="_blank">吉林大学2024年度兴城地学教学实习顺利开展</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="layui-card">
                <div class="layui-card-header">
                    周边天气情况
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=luoyang=20&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=zhengzhou&num=20&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=nanyang&num=20&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=kaifeng&num=20&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=zhumadian&num=20&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=xuchang&num=20&site=12"></iframe>
                </div>
            </div>
        </div>
    </div>
  </div>  
</template>

<script>
export default {
  name:'MyGISMap',
  components: {
  },
  props: {    
  },
  data () {
      return {         
        btn:true,  //默认true为显示
      }
  },
  methods:{  

    mapOnLoad(){

           // init tianditu maps
          var vec = L.KqGIS.tiandituTileLayer({layerType: "vec"});
          var img = L.KqGIS.tiandituTileLayer({layerType: "img"});
          var ter = L.KqGIS.tiandituTileLayer({layerType: "ter"});
          var cva = L.KqGIS.tiandituTileLayer({layerType: "cva"});
          var eia = L.KqGIS.tiandituTileLayer({layerType: "eia"});

          var baseMaps = {
            "矢量图层": vec,
            "影像图层": img,
            "地形晕染图层": ter
          };

          var overlays = {
            "中文注记图层": cva,
            "英文注记图层": eia
          };
         
          var map = L.map('map', {                
              zoomControl: true,
              center: [34, 114],
              zoom: 7,
              attributionControl: false,
              layers: [vec, cva]
          });

          //添加常用底图图层切换按钮
          L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");

          //L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);
          //L.KqGIS.tiandituTileLayer({ layerType: 'cva' }).addTo(map);           

          let CXLRFDB2007 = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007CXLRFDB/map";
          L.KqGIS.tileMapLayer(CXLRFDB2007, {}).addTo(map);

          // 添加鹰眼控件
          var img = L.KqGIS.tiandituTileLayer({ layerType: "img", attribution: null });
          new L.Control.MiniMap(img).addTo(map);           
    }

  },
  created(){     
  },
  mounted(){      
    this.mapOnLoad();
  },
  watch:{},
  computed:{    
  }        
}      

</script>

<style scoped>
.large-page {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
}
#map {
  /* position: inherit; */
  /* width: calc( 100vw - 120px );
  height: calc( 100vh - 50px ); */
  width: 100%;
  height: 100%;
  background-color: rgb(40, 230, 230);
}

.more-file{
    position: absolute;
    right:22.5px;
    height: 42px;
    width: 28px;
    color:#01AAED;
    line-height: 42px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10000;
}
body .demo-class .layui-layer-content{
    background:#FFFFFF;
}
.layui-form-checkbox[lay-skin=primary]{
    /*padding:5px;*/
    padding-left: 25px;
    line-height: 20px !important;
}
#GH-map-layer{
    position: absolute;
    right: 20px;
    bottom: 15px;
    z-index: 2;
    background-color: #fff;
    overflow-x: auto;
}

#GH-map-ex{
    position: absolute !important;
    left: 15px;
    bottom: 15px;
    z-index: 2;
    background-color: #fff;
    /*max-height: 150px;*/
    max-height: 450px;
    overflow: auto;
    display: none;
}

#GH-map-ex::-webkit-scrollbar{
    display: none;
}

</style>






<!-- <script setup>

</script>

<template>
  <div style="width: 100%; height: 100%; background-color: white; border-radius: 8px">
    111
  </div>
</template>

<style scoped>

</style> -->